<template>
  <div>
    <!--客户信息-->
    <el-dialog
      :close-on-click-modal="false"
      title="客户信息"
      :beforeClose="handleClose"
      :visible.sync="dialogVisible"
      width="800px">
      <el-form :model="customerForm" ref="customerForm" size="small" :rules="rules" label-width="100px">
        <el-card shadow="never" style="margin-top:20px">
          <el-col :span="12">
            <el-form-item label="客户名称：" >
              {{customerForm.customerName}}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="统一社会信用代码：" label-width="150px">
              {{customerForm.businessCode}}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户行业：" prop="customerNewIndustry">
              <el-cascader
                v-model="customerForm.customerNewIndustry"
                :options="options2"
                :props="{ value:'typeId',label:'typeName',emitPath:false}"
                clearable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户分类：" prop="customerType">
              <el-select v-model="customerForm.customerType">
                <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerTypeList"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户性质：" prop="customerQuality">
              <el-select v-model="customerForm.customerQuality">
                <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerQualityList"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="客户来源：" prop="customerSource">
              <el-select  v-model="customerForm.customerSource">
                <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerSourceList"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="customerForm.customerSource == 106">
            <el-form-item label="推荐人：" prop="introducerId">
              <el-select v-model="customerForm.introducerId">
                <el-option :value="item.introducerId" :label="item.introducerName+'('+item.introducerMobile+')'" :key="item.introducerId" v-for="item in tjrList"></el-option>
              </el-select>
              <el-button type="text" style="margin-left:10px" @click="showTeiJian">新增</el-button>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="开票是否明细：" prop="isInvoiceNeedDetail">
              <el-radio-group v-model="customerForm.isInvoiceNeedDetail">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户状态：" prop="customerState" >
              <el-select v-model="customerForm.customerState">
                <el-option :value="item.cddId" :label="item.cddValue" :key="item.cddId" v-for="item in customerStateList"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-card>

        <el-card shadow="never" style="margin-top:20px">
          <el-form-item label="法人：">
            <el-input v-model="customerForm.legalPerson" style="width:150px"></el-input>
          </el-form-item>
          <el-form-item label="成立日期：">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="customerForm.issueDate"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="所在地区："  v-model="diQuIds" prop="diQuIds">
            <el-cascader
              v-model="diQuIds"
              :props="{ value: 'areaId',label:'areaName',children:'areaChildList' }"
              :options="options"></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址：" prop="addressDetail">
            <el-input v-model="customerForm.addressDetail"></el-input>
          </el-form-item>
          <el-form-item label="公司网址：" >
            <el-input v-model="customerForm.customerUrl"></el-input>
          </el-form-item>
          <el-form-item label="经营范围：" prop="businessInfo">
            <el-input v-model="customerForm.businessInfo" :autosize="{ minRows: 2, maxRows: 6}" type="textarea" :rows="2" ></el-input>
          </el-form-item>
          <el-form-item label="公司简介：" >
            <el-input v-model="customerForm.customerDetail" :autosize="{ minRows: 2, maxRows: 6}" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-card>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
    </span>
    </el-dialog>
    <!--新增推荐人-->
    <addTjr ref="addTjr" @getintroducerList="getintroducerList"></addTjr>
  </div>

</template>
<script>
import {introducerList,getCompanyInfo,getCustomerSetting,getAddressList} from '@/api/partner'
import {goodsLineAddTracking} from '@/api/company'
import {productCustomersTreeTypeList,developAfterEditBaseInfo} from '@/api/company'
import {validatePhone} from '@/utils/validate';
import {formatDate} from '@/utils/date';
import store from '@/store'
import addTjr from './addTjr'
import { mapGetters } from 'vuex'



const defaultCustomerForm = {
  "businessCode":'',     //统一信用,
  "customerName":'',     //客户名称,
  customerId:'',
  "customerNewIndustry": '',    //客户行业,
  "customerState": '',    //客户状态,
  "customerType":  '',   //客户分类,
  "customerQuality": '',    //客户性质,
  "isInvoiceNeedDetail":  '',   //是否明细开票,
  "legalPerson":'',     //法人,
  "issueDate": '',   //成立日期,
  "provinceId":  '',   //省,
  "cityId": '',    //市,
  "areaId":'',     //区,
  "customerSource":  '',   //客户来源,
  "regAddress": '',    //所在地址,
  "addressDetail":  '',   //详细地址,
  "customerUrl":  '',   //客户网址,
  "businessInfo": '',    //经营范围,
  "customerDetail":  '',   //公司简介,
  "introducerId":'',     //推荐人id,
};
export default {
  name: "index",
  data(){
    const isvalidatePhone = (rule, value, callback) => {
      if(!validatePhone(value)){
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    };
    const isdiQuIds = (rule, value, callback) => {
      if(!this.diQuIds.length){
        callback(new Error('请选择所在地区'))
      } else {
        callback()
      }
    };
    return {
      dialogVisible:false,
      btnLoading:false,
      customerForm:JSON.parse(JSON.stringify(defaultCustomerForm)),
      rules:{
        businessCode:[{required: true, message: '请输入社会统一信用码', trigger: 'blur'},],
        customerName:[{required: true, message: '请输入客户名称', trigger: 'blur'}],
        customerNewIndustry:[{required: true, message: '请选择客户行业', trigger: 'change'},],
        customerState:[{required: true, message: '请选择客户状态', trigger: 'change'},],
        customerType:[{required: true, message: '请选择客户分类', trigger: 'change'},],
        customerSource:[{required: true, message: '请选择客户来源', trigger: 'change'},],
        introducerId:[{required: true, message: '请选择推荐人', trigger: 'change'},],
        customerQuality:[{required: true, message: '请选择客户性质', trigger: 'change'},],

        diQuIds:[{required: true,validator:isdiQuIds, trigger: 'change'},],
        addressDetail:[{required: true, message: '请输入详细地址', trigger: 'blur'},],
        businessInfo:[{required: true, message: '请输入经营范围', trigger: 'blur'}],
      },
      options:[],
      options2:[],
      diQuIds:[],
      customerStateList:[],
      customerTypeList:[],
      customerQualityList:[],
      customerSourceList:[],
      tjrList:[]

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  components : {
    addTjr,
  },
  created() {
      this.getCustomersTreeTypeList();
      this.getCustomerSettingList();
      this.getAddressListData();
      this.getintroducerList();
  },
  filters: {

  },
  methods:{
    showTeiJian(){
      this.$refs.addTjr.showTeiJian('add',this.customerForm.customerId)
    },
    //推荐人列表
    getintroducerList(introducerId){
      introducerList().then((res)=>{
        this.tjrList = res.list;
        if(introducerId){
          this.customerForm.introducerId = introducerId
        }
      })
    },

    //获取客户行业列表
    getCustomersTreeTypeList(){
      this.dataLoading = true;
      productCustomersTreeTypeList({code:2}).then((res)=>{
        this.options2 = this.forTree(res);
      })
    },

    //去除不要的children
    forTree(list){
      let newList = list;
      if(newList.length){
        for (let i = 0; i<newList.length; i++){
          if(newList[i].children && newList[i].children.length > 0){
            this.forTree(newList[i].children)
          }else{
            delete newList[i].children;
          }
        }
        return newList
      }
    },


    //获取客户配置
    getCustomerSettingList(){
      getCustomerSetting().then((res)=>{
        res.forEach((el)=>{
          if(el.cdtCode == 'customer_state'){
            this.customerStateList = el.data
          }else if(el.cdtCode == 'customer_type'){
            this.customerTypeList = el.data;
          } else if(el.cdtCode == 'customer_tracking'){
            this.customerTrackingList = el.data;
          }else if(el.cdtCode == 'customer_source'){
            this.customerSourceList = el.data;
          }else if(el.cdtCode == 'customer_quality'){
            this.customerQualityList = el.data;
          }else if(el.cdtCode == 'customer_industry'){
            this.customerIndustryList = el.data;
          }else if(el.cdtCode == 'transaction_time'){
            this.closingTimeList = el.data
          }else if(el.cdtCode == 'viscosity_grade'){
            this.viscosityGradeList = el.data
          }else if(el.cdtCode == 'goods_line'){
            this.goodsLineList = el.data
          }else if(el.cdtCode == 'pay_method'){
            this.payMethodList = el.data;
          }else if(el.cdtCode == 'cgl_competitor_info'){
            this.cglCompetitorInfoList = el.data;
          }else if(el.cdtCode == 'cgl_competitor_type'){
            this.cglCompetitorTypeList = el.data;
          }
        });
      })
    },

    //获取省市区列表
    getAddressListData(){
      getAddressList().then((res)=>{
        this.options = res;
      })
    },

    //显示
    showPop(item){
      this.dialogVisible = true;
      this.customerForm = JSON.parse(JSON.stringify(item))
      this.customerForm.customerNewIndustry = item.customerNewIndustryId ? item.customerNewIndustryId:''
      this.customerForm.customerQuality = item.customerQualityId? item.customerQualityId:''
      this.customerForm.customerSource = item.customerSourceId? item.customerSourceId:''
      this.customerForm.customerType = item.customerTypeId? item.customerTypeId:''
      this.customerForm.customerState = item.customerStateId? item.customerStateId:''
      this.diQuIds = [this.customerForm.provinceId ,this.customerForm.cityId ,this.customerForm.areaId ];
      this.customerForm.introducerId = item.introducerId ? item.introducerId : ''

    },

    //关闭
    handleClose(){
      this.$refs.customerForm.clearValidate();
      this.dialogVisible = false;
      this.btnLoading = false;
    },

    //提交
    handleConfirm(){
      this.$refs.customerForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let data = JSON.parse(JSON.stringify(this.customerForm));
          data.provinceId = this.diQuIds[0] ? this.diQuIds[0] : null;
          data.cityId = this.diQuIds[1] ? this.diQuIds[1] : null;
          data.areaId = this.diQuIds[2] ? this.diQuIds[2] : null;
          developAfterEditBaseInfo(data).then((res)=>{
            this.btnLoading = false;
            this.handleClose();
            this.$emit('getInfo')
          }).catch(()=>{
            this.btnLoading = false;
          })
        }
      })
    },
  },
}
</script>

<style lang="scss">
    .check-item{
       overflow: hidden;
       margin-bottom:5px;
       .el-checkbox{
         float:left;
         line-height: 20px;
       }
       .el-checkbox__label{
         display: none;
       }
       .label{
         float:left;
         width:calc(100% - 30px);
         margin-left:10px;
         line-height: 20px;
         font-size: 12px;
       }
    }
</style>
